<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
    <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script>
    <script include="leaflet.heat,mapv,leaflet.markercluster,leaflet.draw,echarts" src="../../static/js/include-leaflet.js" type=”text/javascript”></script>
    <script include="jquery,bootstrap-css" src="../../static/js/include-web.js" type=”text/javascript”></script>
    <style>
        body {
            height: 100vh;
        }
        .sidebar {
            height: 100%;
            background-color: #f8f9fa;
        }
        .search-box {
            position: absolute;
            top: 10px;
            right: 20px;
            /*叠放顺序*/
            z-index: 1000;
            background-color: #abc7e3
        }
        .map-container {
            height: 100%;
            width: 100%;
        }
        /*按钮字体大小*/
        .custom-btn {
            font-size: 12px; /* 设置字体大小 */
            padding: 6px 12px; /* 设置内边距 */
        }
        /*搜索框大小*/
        .custom-input {
            width: 40px; /* 设置宽度 */
            height: 30px; /* 设置高度 */
        }


    </style>
    <!--引入脚本库文件 -->
    <!--    <script src="../js/map.js" type=”text/javascript”></script>-->


    <!-- 引入天地图 API -->
    <!--    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=d8755105fd3f8f0ac8004abe548da513"></script>-->

</head>
<body>
<!-- 导航栏 -->
<div class="row h-100">
    <div class="col-md-2 sidebar">
        <nav class="navbar navbar-light bg-light">
            <div class="btn-group-vertical" role="group">
                <a class="navbar-brand">Home</a>
                <!--                <a th:href="@{/dashboard/editProfile}" class="btn btn-outline-primary rounded-right mr-1 my-2 my-sm-0">Edit Profile</a>-->
                <form class="form-inline" action="#" th:action="@{/logout}" method="post">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Log Out</button>
                </form>
                <!--                还没写实现-->
                <form class="form-inline" action="#" th:action="@{/onlinesearch}" method="post">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Online Search</button>
                </form>
                <form class="form-inline" action="#" th:action="@{/infosearch}" method="post">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Information Search</button>
                </form>
                <form class="form-inline" action="#" th:action="@{/heatmap}" method="post">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Heat Map</button>
                </form>
            </div>
        </nav>
    </div>
    <div class="col-md-10">
        <!--        地图-->
        <div class="map-container" id="mapDiv"></div>
        <!--        搜索框-->
        <div class="col-md-3 search-box">
            <div class="msg pl-1 pt-1 pr-1">
                <table class="table table-striped">
                    <div class="container mt-4">
                        <div class="row justify-content-between">
                            <!--                            <div class="col-md-2 text-right">-->
                            <!--                                <h2 style="font-size: 24px;">Users</h2>-->
                            <!--                            </div>-->
                            <div class="col-md-2 text-right">
                                <div class="input-group mb-4">
                                    <form th:action="@{/dashboard/search}" method="get">
                                        <input type="text" name="name" class="custom-input" placeholder="Search..." aria-label="Search" aria-describedby="search-button">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary custom-btn" type="submit" id="search-button">Search</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-2 text-right">
                                <a th:href="@{/dashboard/addUser}" class="btn btn-outline-primary btn-sm" >New</a>
                            </div>
                        </div>
                    </div>
                    <thead>
                    <tr>
                        <th class="custom-btn">Id</th>
                        <th class="custom-btn">Name</th>
                        <th class="custom-btn">Phone</th>
                        <th class="custom-btn">Role</th>
                        <th class="custom-btn"> </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.id}">  </td>
                        <td th:text="${user.name}">  </td>
                        <td th:text="${user.username}">  </td>
                        <td th:text="${user.userrole}">  </td>
                        <td class="text-center ">
                            <form th:action="@{/dashboard/delete}" method="post">
                                <input type="hidden" name="id" th:value="${user.id}" />
                                <button type="submit" class="btn btn-outline-danger custom-btn ">Remove</button>
                            </form>
                            <div class="m-1" > </div>
                            <form th:action="@{/dashboard}" method="post">
                                <input type="hidden" name="id" th:value="${user.id}" />
                                <button type="button" class="btn btn-outline-warning custom-btn">Show</button>
                            </form>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script >
    var map = L.map('mapDiv', {
        center: [39.830660058696104, 116.92866163503169],
        zoom: 5,
        // crs: L.supermap.CRS.TianDiTu_Mercator
        crs: L.CRS.EPSG3857
    });

    var geoJsonLayer;
    // 监听Show按钮的点击事件
    document.querySelectorAll('.custom-btn').forEach(function (button) {
        button.addEventListener('click', function (event) {
            event.preventDefault(); // 阻止默认提交行为

            // 从表单中获取 userId
            var form = this.closest('form');
            var userIdInput = form.querySelector('input[name="id"]');
            var userId = userIdInput.value;

            fetch("/dashboard/showroutes?id=" + userId, {
                method: 'GET'
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    return response.json();
                })
                .then(geojson => {
                    // 清除之前的标记层
                    if (map.hasLayer(geoJsonLayer)) {
                        map.removeLayer(geoJsonLayer);
                    }

                    // 将GeoJSON数据转换为Leaflet图层
                    geoJsonLayer = L.geoJSON(geojson, {
                        onEachFeature: function (feature, layer) {
                            layer.bindPopup(feature.properties.description);
                        }
                    }).addTo(map);
                })
                .catch(error => {
                    console.error("Error fetching GeoJSON data:", error);
                });
        });
    });
    // 添加天地图图层
    url="http://localhost:8090/iserver/services/map-baidu/rest/maps/normal"
    new L.supermap.TiledMapLayer(url).addTo(map);
    // new L.supermap.TiandituTileLayer({
    //     layerType: "vec",
    //     key: 'd8755105fd3f8f0ac8004abe548da513'
    // })
    //     .addTo(map);


    // var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    // var BJ = L.marker([39.830660058696104, 116.92866163503169]).addTo(map),
    //     CD = L.marker([30.40, 104.04]).addTo(map);
    // var points = [
    //     [39.830660058696104, 116.92866163503169],[30.40, 104.04]
    // ];
    //
    // // 绘制线
    // var line = L.polyline(points, {color: 'red'}).addTo(map);
    //
    // // var cities = L.layerGroup([BJ, CD]);


</script>
<!-- 引入 Bootstrap 和 jQuery 等依赖 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEa  /nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>
